<template>
  <view class="address-container">
    <view class="address-list">
      <view class="address-item" v-for="(address, index) in addresses" :key="index" @click="selectAddress(address)">
        <view class="address-content">
          <view class="address-header">
            <text class="name">{{ address.name }}</text>
            <text class="phone">({{ address.phone }})</text>
          </view>
          <view class="address-body">
            <text>{{ address.address_line1 }}</text>
            <text>{{ address.address_line2 }}</text>
          </view>
          <view class="address-footer">
            <view class="separator"></view>
            <view class="action-buttons">
              <text class="edit" @click.stop="goToEditAddress(address)">编辑</text>
              <text class="select" @click.stop="selectAddress(address)">选择</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="button-section">
      <button class="add-address" @click="goToAddAddress">新增地址</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addresses: [],
      selectedAddressId: null,
    };
  },
  onLoad() {
    this.fetchAddresses();
  },
  methods: {
    async fetchAddresses() {
      const token = uni.getStorageSync('Authorization');
      const url = 'http://localhost:8887/Useraddress/selectuser_id';
      const header = {
        'Authorization': token,
      };
      const res = await uni.request({
        url,
        method: 'GET',
        header,
      });
      if (res.data.code === 200) {
        this.addresses = res.data.data;
      } else {
        uni.showToast({
          title: '获取地址数据失败',
          icon: 'none',
        });
      }
    },
    selectAddress(address) {
      this.selectedAddressId = address.id;
      uni.setStorageSync('selectedAddressId', JSON.stringify(this.selectedAddressId));
      uni.navigateTo({
        url: '/pages/settlement2/settlement2',
      });
    },
    goToEditAddress(address) {
      uni.navigateTo({
        url: '/pages/addressadd2/addressadd2',
        success: (res) => {
          res.eventChannel.emit('passData', {
            address: JSON.stringify(address),
            action: '编辑'
          });
        }
      });
    },
    goToAddAddress() {
      uni.navigateTo({
        url: '/pages/addressadd2/addressadd2',
        success: (res) => {
          res.eventChannel.emit('passData', { action: '新增' });
        }
      });
    },
  },
};
</script>

<style>
.address-container {
  padding: 10px;
}
.address-list {
  margin-bottom: 50px;
}
.address-item {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.address-content {
  display: flex;
  flex-direction: column;
}
.address-header {
  display: flex;
  margin-bottom: 10px;
}
.name {
  font-size: 18px;
  font-weight: bold;
}
.phone {
font-size: 14px;
color: #888;
padding-top: 3px;
}
.address-body {
margin-bottom: 10px;
}
.address-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.separator {
height: 1px;
background-color: #eee;
flex-grow: 1;
margin: 5px 10px;
}
.action-buttons {
display: flex;
align-items: center;
}
.edit, .select {
padding: 5px 10px;
background-color: #fff;
border: none;
font-size: 14px;
color: #007AFF;
cursor: pointer;
}
.select {
color: #007AFF;
font-weight: bold;
}
.add-address {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 40px;
background-color: red;
color: #fff;
border-radius: 20px;
border: none;
}
</style>